<template>
    <div class="slin" style="padding-top: 55px;">
        <h2>布局设置</h2>
        <div style="margin-top: 20px">
            导航条类型：
            <el-radio v-model="radio2" label="white" border size="medium"
                @change="handleRadioChange('radio2', radio2)">default</el-radio>
            <el-radio v-model="radio2" label="green" border size="medium"
                @change="handleRadioChange('radio2', radio2)">inserve</el-radio>
        </div>
        <div style="margin-top: 20px">
            侧边栏皮肤：
            <el-radio-group v-model="radio3" size="small" @change="handleRadioChange('radio3', radio3)">
                <el-radio label="navblack" border >dark</el-radio>
                <el-radio label="navwhite" border>light</el-radio>
            </el-radio-group>
        </div>
    </div>
</template>

<script>
import { addColor,addNavColor } from '../assets/style/configColor';
export default {
    data() {
        return {
            radio2: 'white', // 默认值
            radio3: 'navblack'  // 默认值
        };
    },
   
    methods: {
        handleRadioChange(radioGroup, value) {
            // console.log(`选择了 ${radioGroup} 的值: ${value}`);
            // 在这里您可以添加更多的逻辑，例如更新状态或执行其他操作
            if (radioGroup == 'radio2') {
                if (value == 'white') {
                    addColor(value)
                }else{
                    addColor(value)
                }
            }else{
                if (value == 'navblack') {
                    addNavColor(value)
                }else{
                    addNavColor(value)
                }
            }
        }
    },
}
</script>

<style lang="scss" scoped>


::v-deep input[aria-hidden="true"] {
    display: none !important;
}
::v-deep .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
    box-shadow: none;
}
</style>
